<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head th:include="include::head"></head>
<body>
<div class="layui-fluid">
    <!--form表单-->
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input id="name" type="text" name="" autocomplete="off" class="layui-input" lay-verify="required">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">标识</label>
            <div class="layui-input-block">
                <input  id="route" type="text" name="" autocomplete="off" class="layui-input" lay-verify="required">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">新增类型</label>
            <div class="layui-input-block">
                <select lay-filter="filter" name="showtype">
                    <option value="diyType">字典类型</option>
                    <option value="dictionaries">字典</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item" id="type">
            <label class="layui-form-label">字典类型</label>
            <div class="layui-input-block">
                <select name="typeId" lay-verify="required">
                    <th:block th:each="type : ${type}">
                        <option th:value="${type.diyTypeId}" th:utext="${type.diyTypeName}"></option>
                    </th:block>>
                </select>
            </div>
        </div>

        <div class="layui-form-item" id="show-dictionaryClass">
            <label class="layui-form-label">样式</label>
            <div class="layui-input-block">
                <input type="text" id="dictionaryClass" name="dictionaryClass" autocomplete="off" class="layui-input" lay-verify="required">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <th:block th:each="value,iterStat: ${diy['state_type']}">
                        <input th:if="${iterStat.index==0}" type="radio" name="isState" th:value="${value.dictionaryRoute}" th:title="${value.dictionaryName}"  checked  >
                        <input th:if="${iterStat.index!=0}" type="radio" name="isState" th:value="${value.dictionaryRoute}" th:title="${value.dictionaryName}">
                </th:block>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="remarks" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<div id="alert-tree" style="display: none">
    <div class=""  id="tree">loding... ...</div>
</div>
<div th:include="include::onload"></div>
<script  th:inline="javascript">
    layui.config({
        base: '/js/layer/module/'//模块存放的目录
    }).use(['form','verify'], function(){
        var form = layui.form,
            verify = layui.verify;
        verify.verification();
        diyType();

        form.on('select(filter)', function(data){
            var types = data.value;
            if('diyType'==types){
                diyType();
            }else{
                dictionaries();
            }
        });

        // 监听提交
        form.on('submit(edit)', function(data) {
            $.achieve.post("/admin/basics/dictionaries/add",data.field,"",true);
            return false;
        });

    });

    function diyType(){
        $("#name").attr("name","diyTypeName");
        $("#route").attr("name","diyTypeRoute");

        $("#type").hide();
        $("#show-dictionaryClass").hide();

        $("#dictionaryClass").attr("lay-verify","");

    }

    function dictionaries(){
        $("#name").attr("name","dictionaryName");
        $("#route").attr("name","dictionaryRoute");

        $("#type").show();
        $("#show-dictionaryClass").show();

        $("#dictionaryClass").attr("lay-verify","required");
    }

</script>
</body>
</html>